<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="/static/meta.jsp"%>
<title>Insert title here</title>
<style type="text/css">
td, th {
	text-align: center;
}
</style>
</head>
<body>
	<div style="margin-bottom: 10px;">
		<button class="btn btn-sm  btn-primary" id="btn-add">
			<i class="icon-ok bigger-50"></i> 新增
		</button>
		<button class="btn btn-sm  btn-primary" id="btn-mod">
			<i class="icon-undo bigger-50"></i> 修改
		</button>
		<button class="btn btn-sm btn-primary" id="btn-del">
			<i class="icon-undo bigger-50"></i> 删除
		</button>
	</div>
	
	<!-- 新增页面的内容 -->
	<div id="add" style="display: none;">
		<jsp:include page="add.jsp"></jsp:include>
	</div>
	
	<!-- 搜索页面的内容 -->
	<div id="search">
		<jsp:include page="search.jsp"></jsp:include>
	</div>
	
	
	<div style="margin-top: 10px;">
		<table border="1" cellpadding="3" cellspacing="0"
			style="width: 100%; margin: auto" id="orderTable">
			<thead>
				<tr>
					<th><input type = "checkbox" class="select-all"></th>
					<th>申请人</th>
					<th>审批人</th>
					<th>订单号</th>
					<th>订单日期</th>
					<th>状态</th>
					<th>备注</th>
				</tr>
			</thead>
		</table>
	</div>
	
<script type="text/javascript" src="<%=basePath%>/static/My97DatePicker/WdatePicker.js"></script>

	<script type="text/javascript">
		$(function(){
			
			$("#add-form #assetdate,#search-form #assetdate").on("click",function(){
				WdatePicker({
					el:this,
					dateFmt:'yyyy-MM-dd HH:mm:ss'
				})
			})
			var orderTable = $('#orderTable').DataTable( {
		        "ajax":{
		        	"url":"<%=basePath%>/itorder/query",
		        	"data":function(){
		        		var data =  getFormData("#search-form");
		        		return data;
		        	},
		        	"dataSrc": function(data){
		        		return data;
		        	}
		        },
		        "dom": 'rtip',
		        "columns": [
		        	{ "data": "" ,
		        		render : function(data, type, row, meta) {  
		                    // 显示行号  
		                    return "<input type='checkbox' value="+ row.id+">";
		                }  
		        	},
		            { "data": "applicant" },
		            { "data": "approver"},
		            { "data": "assetNumber" },
		            { "data": "assetdate" ,render:function(data, type, row, meta){
		            	
		        		if(!data)return "";
		        		return  new Date(data).Format("yyyy-M-d h:m:s");
		            }},
		            { "data": "state" },
		            { "data": "remarks" }
		        ],
		        columnDefs: [ {
		            orderable: false,
		            className: 'select-checkbox',
		            targets:   0
		            
		        } ],
		        select: {
		            style:    'os',
		            selector: 'td:first-child'
		        },
		        order: [[ 1, 'asc' ]]
		    } );
			
			$("#btn-search").on("click",function(){
				orderTable.ajax.reload();
			})
			$("#btn-reset").on("click",function(){
				$("#search-form")[0].reset();
			})
			
			
			$("#btn-del").on("click",function(){
				var selects = $("#orderTable tr td input:checked");
				var rs = [];
				for(var i = 0 ; i < selects.length; i++){
					rs.push(selects[i].value);
				}
				//发删除请求
				 $.ajax({
					 url:"<%=basePath%>/itorder/del",
					 data:{
						 ids:rs.toString()
					 },
					 success:function(data){
						 layer.msg("删除成功！");
						 orderTable.ajax.reload();
					 }
				})
			})
			
			$("#btn-add").on("click",function(){
				layer.open({
					  type: 1,
					  skin: 'layui-layer-rim', //加上边框
					  area: ['800px', '300px'], //宽高
					  content: $("#add"),
					  btn: ['保存', '取消'], //可以无限个按钮
					  yes:function(index, layero){
						 var data =  getFormData("#add-form");
						 
						 if(!validForm("#add-form")){
							 layer.msg("内容不能为空！");
							 return;
						 }
						 $.ajax({
							 url:"<%=basePath%>/itorder/add",
							 async:false,
							 data:data,
							 success:function(data){
								 layer.msg("保存成功！");
								 orderTable.ajax.reload();
							 }
						 })
						 layer.close(index);
					  },
					});
			})
		
		//修改
		$("#btn-mod").on("click",function(){
			var selects = $("#orderTable input:checked");
			
			if(selects.length > 1 || selects.length == 0){
				layer.msg("只能选择一个进行修改！");
				return false;
			}
			 var sdata = orderTable.row($($("#orderTable input:checked").parents("tr"))).data();
				layer.open({
					  type: 1,
					  skin: 'layui-layer-rim', //加上边框
					  area: ['800px', '300px'], //宽高
					  content: $("#add"),
					  btn: ['保存', '取消'], //可以无限个按钮
					  success:function(layero, index){
						  
						 
						  $("#add-form #applicant").val(sdata.applicant);
						  $("#add-form #approver").val(sdata.approver);
						  $("#add-form #assetNumber").val(sdata.assetNumber);
						  $("#add-form #assetdate").val(new Date(sdata.assetdate).Format("yyyy-M-d h:m:s"));
						  $("#add-form #state").val(sdata.state);
						  $("#add-form #remarks").val(sdata.remarks);
					  },
					  yes:function(index, layero){
						 var data =  getFormData("#add-form");
						 data.id = sdata.id;
						 if(!validForm("#add-form")){
							 layer.msg("内容不能为空！");
							 return;
						 }
						 $.ajax({
							 url:"<%=basePath%>/itorder/mod",
							 async:false,
							 data:data,
							 success:function(data){
								 layer.msg("修改成功！");
								 orderTable.ajax.reload();
							 }
						 })
						 layer.close(index);
					  },
					});
			})
			
		function getFormData(id){
			 var d = {};
			 var t = $(id).serializeArray();
			 $.each(t, function() {
			      d[this.name] = this.value;
			 });
			 return d;
		}
			
		function validForm(id){
			var flag = true;
			var inputs = $(id).find("input,select");
			inputs.each(function(index,element){
				if($(this).val() == ""){
					flag = false;
					return flag;
				}
			})
			return flag;
		}
		
		$(".select-all").on("click",function(){
			$("#orderTable tr td input[type=checkbox]").each(function(){
				$(this).click();
			});
		})
	})
	</script>
</body>
</html>